<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2023/7/24
  Time: 15:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue的js--%>
    <script type="text/javascript" src="/js/vue.js"></script>
    <%--引入elementui的js--%>
    <script type="text/javascript" src="/js/index.js"></script>
    <%--引入axios的js 发送异步请求--%>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <%--引入elementui的css--%>
    <link type="text/css" rel="stylesheet" href="/css/index.css">
</head>
<body>
  <div id="app">
      <div id="main" style="width: 500px;height: 300px"></div>
  </div>
</body>
<script>
     let app=new Vue({
          el:"#app",
          data:{

          },
          created(){
                this.initZZT();
          },
          methods:{
               initZZT(){
                   axios.get("/echart/demo01").then(result=>{
                       var myChart = echarts.init(document.getElementById('main'))
                       myChart.setOption({
                           title: {
                               text: '异步数据加载示例'
                           },
                           tooltip: {},
                           legend: {},
                           xAxis: {
                               data: result.data.data.x
                           },
                           yAxis: {},
                           series: [
                               {
                                   name: '销量',
                                   type: 'bar',
                                   data: result.data.data.y
                               }
                           ]
                       });
                   })
               }
          }
     })
</script>
</html>
